<template>
  <div id="app" :class="{darkTheme:isDark}">
    <top-bar ref="topBar"></top-bar>
    <button @click="changeTheme" class="changeTheme"> 点击切换主题</button>
    <router-view/>
  </div>
</template>

<script>
import topBar from '@/components/top-bar/topBar'

export default {
  name: 'app',
  data () {
    return {
      isDark: true,
    }
  },
  components: {
    topBar,
  },
  methods: {
    changeTheme () {
      this.isDark = !this.isDark
    }
  }
}
</script>

<style lang="scss">
#app {
  overflow-x: hidden;
  height: auto;

  .changeTheme {
    position: fixed;
    top: 50%;
    z-index: 999;
  }

}
.darkTheme {
  color: white !important;
  background-color: #000 !important;
}
</style>